<template>
    <div class="drag" :style="{left:left+'px',top:top+'px'}" @mousedown="mousedown">
        <slot :left="left" :top="top"></slot>
    </div>
</template>

<script>
export default {
    data(){
        return {
            left:100,
            top:100
        }
    },
    methods:{
        mousedown(event){
            let disX = event.clientX - this.left , disY = event.clientY - this.top;
            document.onmousemove = e =>{
                let left = e.clientX - disX , top = e.clientY - disY;
                if(left < 0) left = 0;
                if(top < 0) top = 0;
                this.left = left;
                this.top = top
            }
            document.onmouseup = function (){
                document.onmousemove = null;
                document.onmouseup = null
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .drag{
        position: absolute;
        cursor: pointer;
        user-select: none;
    }
</style>